<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>推广</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<style>
		* {
			touch-action: pan-y;
		}
		
		html {
			height: 100%
		}
		
		body {
			background-image: url("../images/bg-tj.png");
			height: 100%;
			width: 100%;
			background-size: cover;
			background-repeat: no-repeat;
			background-attachment: fixed;
		}
		
		.mui-action-back,
		.mui-title,
		.mui-action-back:active {
			color: #FFFFFF;
			margin: 25px 0px 0px 10px;
		}
		
		.mui-btn {
			border: 1px solid #f16456;
			width: 120px;
			height: 30px;
			background-color: #f16456;
			color: #FFFFFF;
			border-radius: 20px;
			outline: none;
		}
		
		.mui-btn:active {
			border: 1px solid #de7c79!important;
			background-color: #de7c79!important;
		}
		
		.mui-row {
			padding: 60px 15px 0px 15px;
		}
		
		.mui-row div {
			text-align: center;
		}
		
		.head {
			font-size: 30px;
			color: #f3d8d6;
		}
		
		.block {
			border-radius: 20px;
			height: 380px;
			margin-top: 30px;
			background-color: white;
			opacity: 0.9;
		}
		
		.block .mt {
			margin-top: 20px;
		}
		
		.mt .text {
			font-size: 30px;
			color: #f16456;
		}
		
		.mt span p {
			font-size: 12px;
		}
		
		.mui-pull {
			background-color: blanchedalmond;
			bottom: 0px;
		}
		
		.mui-pull div {
			width: 20%;
			padding-top: 10px;
		}
	</style>

	<body>
		<header>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		</header>
		<div>
			<div class="mui-row">
				<div class="mui-col-xs-12">
					<span class="head">百万红包大派送</span>
				</div>
				<div class="mui-col-xs-12">
					<span><p style="color: #efb0b0;">&nbsp;</p></span>
				</div>
				<div class="mui-col-xs-12 block">
					<div class="mt">
						<span>您的邀请码</span>
					</div>
					<div class="mt">
						<span class="text" id="code"></span>
					</div>
					<div class="mt">
						<span>
							<button type="button" class="mui-btn">分享给好友</button>
							<p style="color: #f16456;">百万红包等你来抢,快快行动吧！</p>
						</span>
					</div>
					<div class="mt">
						<div id="qrcodeCanvas"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="mui-pull" style="display: none;height: 80px;">
			<div class="mui-pull-left" id="wechat" platform="weixin" extra="WXSceneSession">
				<img src="../images/share-wechat.png" width="32px" />
				<h6>微信好友</h6></div>
			<div class="mui-pull-left" id="wechatMoment" platform="weixin" extra="WXSceneTimeline">
				<img src="../images/share-wechat-moment.png" width="32px" />
				<h6>朋友圈</h5></div>
			<div class="mui-pull-left" id="copyLink">
				<img src="../images/share-link.png" width="32px" />
				<h6>复制链接</h6></div>
			<div class="mui-pull-left" id="shareSystem">
				<img src="../images/share-system.png" width="32px" />
				<h6>更多</h6></div>
			<div class="mui-pull-left" id="cancel">
				<img src="../images/share-cancel.png" width="32px" />
				<h6>取消</h6></div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/public.js"></script>
	<script src="../js/jquery-1.8.3.min.js"></script>
	<script src="../js/utf.min.js"></script>
	<script src="../js/jquery.qrcode.min.js"></script>
	<script type="text/javascript">
		mui.init({
			gestureConfig: {
				longtap: true, //默认为false
			}
		});
		$(document).ready(function() {
			mui.plusReady(function() {
				swipeBack();
				var code = JSON.parse(plus.storage.getItem("member")).code;
				var config = JSON.parse(plus.storage.getItem("config"));
				var webPage = config.webPage;
				var recText = config.recText;
				document.getElementById("code").innerText = code;

				//生成二维码
				$("#qrcodeCanvas").qrcode({
					render: "canvas",
					text: webPage + "/invite.html?code=" + code,
					width: "150",
					height: "150"
				});

				//分享
				var shares = {};
				plus.share.getServices(function(s) {
					if(s && s.length > 0) {
						for(var i = 0; i < s.length; i++) {
							var t = s[i];
							if(t.authenticated) {
								shares[t.id] = t;
							}
						}
					}
				}, function() {
					console.log("获取分享服务列表失败");
				});

				$("button").click(function() {
					$(".mui-pull").fadeIn(200);
					$(".mui-pull div").fadeIn(200);
				});
				$("#cancel").click(function() {
					$(".mui-pull").fadeOut(200);
					$(".mui-pull div").fadeOut(200);
				});
				$("#wechat,#wechatMoment").click(function() {
					var share = shares[$(this).attr("platform")]
					var msg = {
						extra: {
							scene: $(this).attr("extra")
						}
					};
					msg.href = webPage + "/invite.html?code=" + code;
					msg.title = recText.split("@")[0];
					msg.content = recText.split("@")[1];
					msg.thumbs = ["_www/images/logo.png"];
					share.send(msg);

				});
				$("#shareSystem").click(function() {
					plus.share.sendWithSystem({
						content: recText.replace("@", "\r\n"),
						href: webPage + "/invite.html?code=" + code
					});
				});
				//复制链接到剪切板
				$("#copyLink").click(function() {
					var text = recText.replace("@", "\r\n") + "\r\n" + webPage + "/invite.html?code=" + code;
					if(mui.os.android) {
						var Context = plus.android.importClass("android.content.Context");
						var main = plus.android.runtimeMainActivity();
						var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);
						plus.android.invoke(clip, "setText", text);
						mymui("复制成功,快去邀请您的好友吧");
					} else if(mui.os.ios) {
						var UIPasteboard = plus.ios.importClass("UIPasteboard");
						var generalPasteboard = UIPasteboard.generalPasteboard();
						generalPasteboard.setValueforPasteboardType(text, "public.utf8-plain-text");
						mymui("复制成功,快邀请您的好友吧");
					} else {
						mui.alert("由于系统权限限制,不允许复制.您可以保存屏幕截图邀请好友", "系统提示", "确定");
					}
				});

				//监听二维码长按事件
				document.getElementById("qrcodeCanvas").addEventListener("longtap", function() {
					plus.nativeUI.actionSheet({
						cancel: "取消",
						buttons: [{
							title: "保存到相册"
						}]
					}, function(e) {
						switch(e.index) {
							case 1:
								var bitmap = new plus.nativeObj.Bitmap('bitmap');
								var ws = plus.webview.currentWebview();
								// 将webview内容绘制到Bitmap对象中
								ws.draw(bitmap, function() {
									bitmap.save("/my_invite.png", {
										overwrite: true
									}, function(i) {
										plus.gallery.save(i.target, function(i) {
											mConsole.log('保存图片成功：' + JSON.stringify(i));
											mymui("保存成功");
										}, function(e) {
											mConsole.log('保存二维码失败:' + JSON.stringify(e));
											mymui("保存二维码失败");
										});
										bitmap.clear();
									}, function(e) {
										mConsole.log('保存图片失败：' + JSON.stringify(e));
										mymui("保存二维码失败");
										bitmap.clear();
									});
								}, function(e) {
									mymui("保存二维码失败");
								});
								break;
						}
					});
				});
			});
		});
	</script>

</html>